<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="walletHeadBatten" style="width: 100%; height: 100%;">
						<view class="tn-gradient-bg__cool-6 tn-bg-image top-font-title"
							style="width: 100%; display: flex;flex-direction: column;align-items: center;">
							<!-- 顶部占位 -->
							<view :style="'height:'+sConf.tH+'px;'"> </view>

							<!-- 标题 -->
							<view style="padding: 40px 100px;font-size: large;font-weight: bold;color: #fff;"> 收货地址
							</view>
						</view>
						<!-- 按钮 -->
						<view style="padding: 20px 10px;width: 100%;">
							<tn-button type="primary" size="xl" width="100%" click-modifiers="stop"
								@click="newAddress">增加</tn-button>
						</view>
						<scroll-view class="walletSlBlock" scroll-y :style="'height:'+topH+'px;'"
							@scrolltolower="lastPage">
							<view>
								<tn-swipe-action @select="swipeActChange">
									<tn-swipe-action-item v-for="(item,index) in addressData" :key="index"
										:options="swipeActData">
										<view
											style="padding: 10px;border-radius: 5px; display: flex;flex-direction: column;gap: 5px;border-radius: 5px;">
											<view
												style="display: flex;justify-content: space-between;align-items: center;">
												<text style="font-weight: bold;">收货人:</text>
												<text
													style="padding: 5px;border-bottom: 1px solid #c8c7cc;">{{item.name}}
													{{item.phone}} </text>
											</view>
											<view style="display: flex;justify-content: space-between;">
												<text style="font-weight: bold;">区域:</text>
												<text
													style="padding: 5px;border-bottom: 1px solid #c8c7cc;">{{item.sheng}}
													{{item.shi}}
													{{item.xian}}</text>
											</view>
											<view style="display: flex;justify-content: space-between;">
												<text style="font-weight: bold;">详细地址:</text>
												<text
													style="padding: 5px;border-bottom: 1px solid #c8c7cc;">{{item.address}}</text>
											</view>
											<view v-if="!item.zhen" style="color: #dd524d;">地址无效，请向左滑动编辑</view>
										</view>
									</tn-swipe-action-item>
								</tn-swipe-action>

								<view v-if="addressData === null || addressData.length === 0"
									style="padding: 45px 0;background-color: #fff;border-radius: 5px;">
									<tn-empty mode="list"></tn-empty>
								</view>
							</view>
						</scroll-view>


						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{title}}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';

	export default {
		data() {
			return {
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				maxPage: 1, // 最大数	
				topH: 0,
				title: '悦君玺 • 重庆',
				sConf: getApp().globalData,
				banner: '/media/images/efc56953-c719-46ec-ad24-1f207516ca9d.jpeg',
				addressData: [],
				swipeActData: [{
						text: '编辑',
						icon: 'edit',
						bgColor: 'tn-orange'
					},
					{
						text: '删除',
						icon: 'delete',
						bgColor: 'tn-red'
					}
				]
			}
		},
		onLoad() {
			console.log('onLoad');
			this.bH = this.sConf.iH - 200 - 100
			this.loadAddressData()
		},
		onShow() {
			console.log('onShow');
			this.loadAddressData()
		},
		onReady() {
			console.log('onReady');
			this.designLayout()
		},
		methods: {
			designLayout() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.walletHeadBatten').boundingClientRect();
					query.select('.walletSlBlock').boundingClientRect();
					query.exec((res) => {
						console.log('mallt窗口', this.sConf.iH, res[0].top, res[1].top);
						this.topH = this.sConf.iH - res[1].top - this.sConf.tH + 10;
					});
				})
			},
			/**
			 * 加载地址数据
			 */
			loadAddressData() {
				let host = this.sConf.host + '/weapps/address/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id,
					page: this.page,
					size: this.size,
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('加载收货地址', res);
					if (res.rescode === 200) {
						if (this.page > 1) {
							this.addressData = this.addressData.concat(res.resmsg)
						} else {
							this.addressData = res.resmsg
						}
						this.count = res.count
						this.size = res.size
						this.maxPage = Math.ceil(res.count / res.size)
					}
				})
			},
			/**
			 * 下一页
			 */
			lastPage() {
				console.log('lastPage');
				if (this.page < this.maxPage) {
					this.page++
					this.loadAddressData()
				}
			},
			/**
			 * 编辑地址
			 * @param {Object} e
			 */
			newAddress() {
				console.log('newAddress');
				uni.navigateTo({
					url: '/pageb/userinfo/address-edit'
				})
			},
			/**
			 * 左划事件
			 * @param {Object} e
			 */
			swipeActChange(e, act) {
				console.log('swipeActChange', e, act);
				let that = this
				if (act === 0) {
					uni.navigateTo({
						url: '/pageb/userinfo/address-edit?data=' + that.addressData[e].id
					})
				}
				if (act === 1) {
					uni.showModal({
						title: '询问',
						content: '是否要移除这条数据',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								let host = that.sConf.host + '/weapps/address/' + that.addressData[e].id + '/';
								let token = that.sConf.token || '';
								utils.authenticatorDelete(host, token).then((res) => {
									console.log('移除收货地址', res);
									if (res.rescode === 200) {
										that.loadAddressData()
										uni.showToast({
											title: '移除成功',
											icon: 'success',
											duration: 2000
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>